<!-- 用户管理 -->
<template>
  <el-card shadow="never" class="history-body">
    <div class="right-title">历史记录</div>
    <div class="right-button" @click="newSession"></div>
    <div class="right-message-content" v-if="messageList && messageList.length > 0">
      <div class="right-message" v-for="(item, index) in messageList" :key="index" @click="messageClick(item)">
        <div class="message-remark">
          <el-tooltip effect="light" placement="left-start">
            <span>{{ item.remark }}</span>
            <template #content>
              <div class="tip">{{ item.remark }}</div>
            </template>
          </el-tooltip>
        </div>
        <el-button :icon="Delete" :loading="btnLoading" class="message-del" @click="delItem(item.id)" link />
      </div>
    </div>
    <div class="noList" v-else>
      <div class="noList-content">
        <div class="noList-img">
          <img src="../../../assets/images/no-img.png" alt="" />
        </div>
        <div class="noList-text">暂无数据</div>
      </div>
    </div>
    <div class="message-btn" v-if="messageList && messageList.length > 0">
      <el-button type="primary" :loading="bigBtnLoading" :icon="Delete" class="del-all" @click="delAll">删除全部</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { Delete } from "@element-plus/icons-vue";

import {
  QuestionHisQuery,
  QuestionHisForm,
} from "@/api/ai/question-his/types";
import {
  listQuestionHis,
  deleteQuestionHis,
} from "@/api/ai/question-his/index";

import { ref } from "vue";

defineOptions({
  name: "History",
  inheritAttrs: false,
});
const props = defineProps({
  bridgeType: {
    type: String,
    default: "",
  },
  category: {
    type: String,
    default: "",
  },
  diseaseType: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "",
  },
});
const btnLoading = ref<boolean>(false);
const bigBtnLoading = ref<boolean>(false);

// 监听顶部按钮(diseaseType)点击变化
watch(
  () => props,
  (newValue, oldValue) => {
    params.diseaseType = newValue.diseaseType;
    params.category = newValue.category;
    params.bridgeType = newValue.bridgeType;
    getData();
  },
  {
    deep: true,
  }
);

// 查询参数
const params = reactive<QuestionHisQuery>({
  bridgeType: props.bridgeType, // 菜单
  category: props.category, // 菜单
  diseaseType: props.diseaseType, // 列表分类
  pageNo: 1,
  pageSize: 9999,
});
const emit = defineEmits(["updateMessage", "reload"]);
const messageList = ref<QuestionHisForm[]>([]);

// 获取数据
function getData() {
  listQuestionHis(params).then(({ data }) => {
    const records = data.records;
    messageList.value = records;
  });
}
defineExpose({
  getData,
});
// 点击每一条历史记录把内容传到父组件的底部对话框
function messageClick(value) {
  // (第一个参数是对话框内容,第二个是顶部按钮当前选项)
  emit("updateMessage", value, props.diseaseType);
}

// 点击新建对话,清除底部对话框内容,并回到病害诊断的初始问答页面
function newSession() {
  // (第一个参数是清空对话框内容,第二个是顶部按钮回到首选项)
  emit("updateMessage", "", "");
}

// 删除每条messageList
function delItem(value) {
  const params = [value];
  ElMessageBox.confirm("确定删除该条历史记录吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    btnLoading.value = true;
    deleteQuestionHis(params).then(({ data }) => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getData();
      btnLoading.value = false;
    });
  });
}

// 删除全部messageList
function delAll() {
  const params = [];
  messageList.value.forEach((item) => {
    params.push(item.id);
  });
  ElMessageBox.confirm("确定删除所有历史记录吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      bigBtnLoading.value = true;
      deleteQuestionHis(params).then(({ data }) => {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getData();
        bigBtnLoading.value = false;
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除失败",
      });
    });
}

onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.history-body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 26px 0;
  font-size: var(--el-font-size-base);

  .right-title {
    font-size: 16px;
    color: var(--menu-text);
    text-align: center;
    margin-bottom: 9px;
  }

  .right-button {
    width: 130px;
    height: 38px;
    background: url("../../../assets/images/d07.png") no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    cursor: pointer;
    margin-bottom: 9px;
  }

  .right-message-content {
    width: 100%;
    height: calc(100vh - 360px);
    overflow-y: scroll;
    scrollbar-width: none;

    .right-message {
      position: relative;
      height: 82px;
      color: var(--menu-text);
      line-height: 16px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid var(--menu-text);
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary-dark-2);

        .message-del {
          position: absolute;
          right: 0;
          top: 0;
          width: 20%;
          height: 100%;
          text-align: right;
          display: block;
          background: var(--el-border-color-lighter);
          border-radius: 0;
          color: var(--menu-text);
          text-align: center;
          animation: fadeOutRight 0.5s forwards;
        }
      }

      &:last-child {
        border-bottom: none;
      }

      .message-remark {
        width: 80%;
        position: relative;
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .message-del {
        width: 20%;
        text-align: right;
        display: none;
        text-align: center;
      }
    }
  }

  @keyframes fadeOutRight {
    from {
      opacity: 0;
      transform: translateX(100%);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .message-btn {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    height: 38px;
    display: flex;
    align-items: baseline;
    justify-content: center;

    .del-all {
      width: 80%;
      height: 38px;
      margin: 0 auto;
      color: var(--menu-text);
    }
  }

  .noList {
    width: 100%;
    height: calc(100vh - 320px);
    display: flex;
    align-items: center;

    .noList-content {
      width: 100%;
      height: 104px;
      text-align: center;
    }

    .noList-img {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: center;

      img {
        width: auto;
        height: 100%;
      }
    }

    .noList-text {
      font-size: 12px;
      color: var(--el-color-info-dark-2);
    }
  }
}

.tip {
  width: 210px;
}
</style>
